<template>

    <el-card shadow="never">

        <el-row class="plan" :gutter="10">
            <el-col :md="6">
                <div class="card">
                    <div class="title">今日入职</div>
                    <div class="desc">日环比<sa-icon name="up-fill" /></div>
                    <p><span class="count">123</span>人</p>
                </div>
            </el-col>
            <el-col :md="6">
                <div class="card">
                    <div class="title">今日入职</div>
                    <div class="desc">日环比<sa-icon name="up-fill" /></div>
                    <p><span class="count">123</span>人</p>
                </div>
            </el-col>
            <el-col :md="6">
                <div class="card">
                    <div class="title">今日入职</div>
                    <div class="desc">日环比<sa-icon name="up-fill" /></div>
                    <p><span class="count">123</span>人</p>
                </div>
            </el-col>
            <el-col :md="6">
                <div class="card">
                    <div class="title">今日入职</div>
                    <div class="desc">日环比<sa-icon name="up-fill" /></div>
                    <p><span class="count">123</span>人</p>
                </div>
            </el-col>
        </el-row>

    </el-card>

</template>

<script setup>

import {onActivated, ref} from "vue";
import {onBeforeRouteLeave} from "vue-router";

const inShow = ref(0);

const onShow = () => {
    inShow.value++;
    if(inShow.value < 10) setTimeout(() => onShow(), 100)
}
onShow();
onBeforeRouteLeave(() => {
    inShow.value = 0;
})
//回到此页
onActivated(() => {
    onShow();
})

</script>
<script>
export default {
    title: "数据面板",
    icon: "el-icon-setting",
    description: "数据统计总览"
}
</script>

<style scoped lang="scss">

.card{
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title{
        font-size: 14px;
        color: #333;
        font-weight: bold;
    }
    .count{
        font-size: 24px;
        color: #333;
        font-weight: 500;
    }
    .desc{
        font-size: 12px;
        color: #999;
        font-weight: 500;
        margin-bottom: 5px;
    }
}

</style>